<template>
    <!-- <div class="header">
        <div class="return" ><i class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 27px;"></i></div>
        <div> 自助退款</div>
    </div> -->
    <div class="refund">
        <div class="refund-banner">
            <img src="../../../assets/img/newBanner.png" alt="">
        </div>
        <div class="refund-module">
            <div class="refundTitle">商家订单号</div>
            <div class="refundSubTitle">在支付订单页面可找到该单号，具体看下方教程。</div>
            <div class="refundInput">
                <!-- <div class="uni-input-placeholder input-placeholder" data-v-19f3442a="">输入商家订单号或订单号</div> -->
                <input maxlength="140" step="0.000000000000000001"  pattern="[0-9]*" autocomplete="off" type="number" class="uni-input-input" placeholder="输入商家订单号或订单号" v-model="orderNo" >
            </div>
           
            <div class="refundButton" @click="saveRefund">立即退款</div>
            <div class="serviceBtns">
                <div class="btnItem">
                   <img src="https://ad-oss.ainys.cn/images/refund/telIcon.png" alt="">
                   <span><a href="tel: 4009969168">拨打热线</a></span>
                </div>
                <div class="btnItem" @click="btnSJ">
                    <img src="https://ad-oss.ainys.cn/images/refund/earphoneIcon.png" alt="">
                    <div>联系商家客服</div>
                </div>
            </div>
            <div  class="refundRules">
                <p  class="refundText">* 提交退款申请后10分钟内款项将原路返回；</p>
                <p  class="refundText">* 退款成功后，您购买的权益服务将立即失效，且抽奖活动的奖品视为放弃，感谢理解。</p>
            </div>
        </div>
        <div class="refund-guide">
            <div class="guideTitle">如何找到商家订单号？</div>
            <div class="guideType">
                <div :class="['typeItem',selectType=='zfb' ? 'active' :'']" @click="btnType('zfb')" > 支付宝支付</div>
                <div :class="['typeItem',selectType=='wx' ? 'active' :'']" @click="btnType('wx')">微信支付</div>
            </div>
            <img :src="imgUrl" alt="">
        </div>
    </div>  
</template>
<script>
import { useRoute} from 'vue-router'
import { ref, onMounted} from 'vue'
import api from '../api/index'
import { showToast} from 'vant'
export default {
  component: {
  },
  setup() {
    const type=[
        "https://ad-oss.ainys.cn/images/refund/aliGuide2.png",
        'https://ad-oss.ainys.cn/images/refund/wechatGuide2.png'
    ]
    const selectType=ref('zfb')
    const imgUrl=ref('https://ad-oss.ainys.cn/images/refund/aliGuide2.png')
    const orderNo =ref(null)
    onMounted(() => {
        if(selectType.value=='zfb'){
            imgUrl.value=type[0]
        }else{
            imgUrl.value=type[1]
        }
    })
    
    const methods = {
        btnType(imgType){
            selectType.value=imgType
           if( imgType=="zfb"){
            imgUrl.value=type[0]
           }else{
            imgUrl.value=type[1]
           }
        },
        saveRefund(){
            if(orderNo.value){
                api.post('applyRefund', { orderNo:orderNo.value }).then(res => {
                if (res.code === 200) {
                    showToast('保存成功')
                } else {
                    showToast(res.message)
                }
                })
            }else{
                showToast('订单号不能为空')
            }
        },
        btnSJ(){
            location.href="https://shop.qhdyywlkj.com/benefitCarder/#/resultWchat"
        }
    }

    return {
      ...methods,
      type,
      selectType,
      imgUrl,
      orderNo
    }
  }
}
</script>
<style lang="scss" scoped>
.header{
    height:.2rem;
    line-height:0.2rem;
    font-size:0.12rem;
    text-align:center;
    .return{
        position: absolute;
        left: 0.08rem;
    }
}
.refund{
    font-size:0.12rem;
    background-color: #f0f4f6;
    padding-bottom: .33rem;
    min-height: 100vh;
    .refund-banner{
        width: 100%;
        height: 1.37rem;
        img{
            width:100%
        }
    }
    .refund-module {
        text-align:left;
        margin: -0.5rem 0.08rem 0;
        padding: 0.08rem 0.065rem;
        background: #fff;
        border-radius: 0.1rem;
        z-index: 1;
        position: relative;
        .refundTitle{
            color: #000;
            font-size: 0.12rem;
            font-weight: 700;
        }
        .refundSubTitle{
            color: #888;
            font-size: 0.08rem;
            margin:0.05rem 0;
        }
        .uni-input-input {
            position: relative;
            display: block;
            height: 100%;
            width:100%;
            background: none;
            color: inherit;
            opacity: 1;
            font: inherit;
            line-height: inherit;
            letter-spacing: inherit;
            text-align: inherit;
            text-indent: inherit;
            text-transform: inherit;
            text-shadow: inherit;
            outline: none;
            border: none;
            padding: 0;
            margin: 0;
            text-decoration: inherit;
        }
        .uni-input-placeholder {
            position: absolute;
            top: auto!important;
            left: 0.2rem;
            color: grey;
            overflow: hidden;
            text-overflow: clip;
            white-space: pre;
            word-break: keep-all;
            pointer-events: none;
            line-height: inherit;
        }
        .refundInput {
            margin-top: 0.05rem;
            padding: 0.15rem 0.13rem;
            background: #f0f4f6;
            border: 2px solid #fd8319;
            border-radius: 0.05rem;
        }
        .refundButton{
            color:white;
            text-align: center;
            font-size:0.18rem;
            margin:0.12rem 0;
            height:0.2rem;
            border-radius:5px;
            background-image: linear-gradient(220deg,#ffa240,#f56126);
            padding:0.12rem;
        }
        .serviceBtns{
            display: flex;
            justify-content: space-between;
            .btnItem{
                background:#edf1f3;
                display: flex;
                width:38%;
                font-size:0.09rem;
                justify-content: center;
                align-items: center;
                height:0.2rem;
                line-height:0.2rem;
                border: 2px solid #d5d5d5;
                border-radius: 0.2rem;
                padding:0.05rem 0.1rem;
                img{
                    height:0.17rem;
                    width:0.17rem;
                    margin-right:0.02rem
                }
                a{
                    color:#2c3e50
                }
            }
        }
        .refundRules{
            margin-top:0.05rem;
        }
        .refundText{
            font-size: 0.09rem;
            color: #858585;
            margin-bottom:0.05rem;
            line-height:0.1rem;
        }
    }
    .refund-guide{
        text-align:left;
        margin: 0.08rem 0.08rem 0;
        padding: 0.08rem 0.065rem;
        background: #fff;
        border-radius: 0.1rem;
        z-index: 1;
        position: relative;
        .guideTitle{
            color: #000;
            font-size: 0.12rem;
            font-weight: 700;
        }
        .guideType{
            display:flex;
            justify-content: space-between;
            margin:0.1rem 0;
           
            .typeItem{
                width:27%;
                background:#fff;
                padding:0.08rem 0.2rem;
                border: 2px solid silver;
                border-radius:8px;
                font-size:0.08rem;
                text-align: center;
               
            }
           
        }
        img{
            width:100%;
        }
        .active{
            border: none !important;
            background-image: -webkit-linear-gradient(230deg,#ffa240,#f56126) !important;
            background-image: linear-gradient(220deg,#ffa240,#f56126) !important;
            color: #fff  !important;
        }
    }
}


</style>